<template>
  <div class="login-container">
    <n-card :bordered="false" size="large"
            class="login-card s:px-0">
      <div class="flex items-center justify-between">
        <div class="form-content rounded-lg pl-0 my-0 mx-auto">
          <h1 class="text-center text-2xl font-semibold mb-6">Auth System</h1>
          <!--login-start-->
          <n-form v-if="route.name === 'login'" :model="loginState.form" :show-label="false"
                  @keyup.enter="submitLogin(loginState.form)">
            <n-form-item path="username">
              <n-input v-model:value="loginState.form.username" :allow-input="noSideSpace"
                      :disabled="loginState.loading" placeholder="用户名" size="large" type="text">
                <template #prefix>
                  <n-icon :component="Person"/>
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="password">
              <n-input v-model:value="loginState.form.password" :disabled="loginState.loading" placeholder="密码"
                      :allow-input="noSideSpace" show-forget-on="mousedown" show-password-on="mousedown" size="large"
                      type="password">
                <template #prefix>
                  <n-icon :component="LockClosed"/>
                </template>
              </n-input>
            </n-form-item>
            <n-button :loading="loginState.loading" class="w-full h-10" type="primary" @click="submitLogin(loginState.form)">登录
            </n-button>
          </n-form>
          <!--login-end-->
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMainStore, useUserStore } from '@/store'
import { login } from '@api/userApi'
import { Person, LockClosed } from '@vicons/ionicons5'
import { noSideSpace } from '@/utils'

const router = useRouter()
const route = useRoute()

const mainStore = useMainStore()
const userStore = useUserStore()

// 登录数据
const loginState = reactive({
  loading: false,
  form: {
    username: '',
    password: '',
  },
})

// 提交登录
const submitLogin = async formData => {
  if (formData.username === '' || formData.password === '') return $message.error('用户名或密码不能为空！')
  loginState.loading = true
  let loginMsgLoading = $message.loading('正在登录中...', { duration: 0 })
  try {
    const res = await login(formData)
    if (res?.statusCode === 200) {
      $message.destroyAll()
      $message.success(res.message)
      userStore.setUserState(res.data.token)
      await router.replace('/center')
    }
  } finally {
    loginMsgLoading && loginMsgLoading.destroy()
    loginMsgLoading = null
    loginState.loading = false
  }
}

let loginInputBgc = ref(mainStore.theme === 'dark' ? '#303033' : '#e8f0fe')

watch(() => mainStore.theme, (newValue) => {
  loginInputBgc.value = newValue === 'dark' ? '#303033' : '#e8f0fe'
})
</script>

<style lang="less" scoped>
.login-container {
  background-image: linear-gradient(120deg, #83a8e6 0%, #97c4d9 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  &:deep(.login-card) {
    border-radius: 6px;
    max-width: 400px;
    .n-card__content {
      padding: 40px 30px;
      .form-content {
        width: 100%;
        .n-form {
          width: 100%;

          .n-input {
            height: 40px;
            display: flex;
            align-items: center;
            background-color: v-bind(loginInputBgc);
            border: none;
            &:focus:not(:focus-visible) {
              border: none;
            }

            .n-input__prefix {
              margin-right: 10px;
            }
            .n-input__border{
              border-color: #f5f5f5;
            }
          }
        }
      }
    }
  }
}
</style>
